<template>
  <div>
    <el-dialog title="添加连接" :visible.sync="$store.state.addarticle" :lock-scroll="false" custom-class="loginstyle" top="30%" :modal="false">
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item  prop="title">
          <el-input type="text" placeholder="请输入标题" v-model="form.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item  prop="url">
          <el-input type="text" placeholder="请输入链接" v-model="form.url" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-row :gutter="10">
            <el-col :span="24"><el-button style="width:100%" @click="submitForm('form')">添加</el-button></el-col>
          </el-row> 
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  
</template>
<script>
  export default {
    name: 'addarticle',
    data () {
      return {
        form: {
          title: '',
          url: ''
        },
        rules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          url: [
            { required: true, message: '请输入链接地址', trigger: 'blur' },
            { pattern: /^((https|http|ftp|rtsp|mms)?:\/\/)(([0-9a-zA-Z_!~*'().&=+$%-]+: )?[0-9a-zA-Z_!~*'().&=+$%-]+@)?(([0-9]{1,3}.){3}[0-9]{1,3}|([0-9a-zA-Z_!~*'()-]+.)*([0-9a-zA-Z][0-9a-zA-Z-]{0,61})?[0-9a-zA-Z].[a-zA-Z]{2,6})(:[0-9]{1,4})?((\/?)|(\/[0-9a-zA-Z_!~*'().;?:@&=+$,%#-]+)+\/?)$/, message: 'url地址不符合规则！'
            }
          ]
        }
      }
    },
    methods: {
      submitForm (formName) {
        var that = this
        that.$refs[formName].validate((valid) => {
          if (valid) {
            that.H.ajax('/user/user/addarticle', {
              topicid: that.$route.params.id,
              articlename: that.form.title,
              articleurl: that.form.url
            }, 'post', function (data) {
              if (data.success) {
                that.$message({message: data.info, type: 'success'})
                // 刷新
                that.$store.dispatch('getarticlelist', {
                  id: that.$route.params.id,
                  currentpage: 1,
                  pagesize: 10
                })
                // 清除表单内容
                that.$refs[formName].resetFields()
                // 关闭页面
                that.H.store('addarticle', false)
              } else {
                that.$message.error(data.info)
              }
            })
          } else {
            this.H.error('信息填写不完整！')
            return false
          }
        })
      }
    }
  }
</script>

<style>
.loginstyle{
  width: 330px !important;
  margin-bottom:0px !important;
  background: #fbfbfb !important;
  border-radius: 3px !important;
}
.el-dialog__header{
  padding: 20px 20px !important;
  background-color: #000 !important;
  border-top-left-radius: 3px !important;
  border-top-right-radius: 3px !important;
}
.el-dialog__body {
  padding: 30px 20px 5px !important;
  color: #445972 !important;
  font-size: 14px !important;
}
.el-dialog__title{
  color:#bfcbd9 !important;
}
</style>
